// export interface BlockModel {
//   componentKey: string;
//   focus: boolean;
//   adjustPosition: boolean;
//   top: number;
//   left: number;
//   width: number;
//   height: number;
//   zIndex: number;
//   props: {};
//   model: {
//     modelValue: string;
//   };
// }

export interface BlockModel {
  componentKey: string;
  focus: boolean;
  adjustPosition: boolean;
  top: number;
  left: number;
}

export interface VisualEditorModel {
  container: {
    width: number;
    height: number;
  };
  blocks?: Array<BlockModel>;
}

export interface VisualEditorComponent {
  key: string;
  label: string;
  preview: () => JSX.Element;
  render: () => JSX.Element;
}

export function createBlock(data: {
  component: VisualEditorComponent | null;
  top: number;
  left: number;
}): BlockModel {
  return {
    componentKey: data.component!.key,
    top: data.top,
    left: data.left,
    adjustPosition: true,
    focus: true
  }
}

export function createVisualEditorConfig() {
  const componentList: Array<VisualEditorComponent> = [];
  const componentMap: Record<string, VisualEditorComponent> = {};
  return {
    componentList,
    componentMap,
    registry: (key: string, component: Omit<VisualEditorComponent, 'key'>) => {
      const comp = { ...component, key };
      componentList.push(comp);
      componentMap[key] = comp;
    }
  };
}

export type VisualEditorConfig = ReturnType<typeof createVisualEditorConfig>;
